<template>
  <div>
    <el-card>
      <el-row type="flex" justify="space-between">
        <el-col>
          <div class="before">
            <el-button type="primary" @click="openClien">添加客户</el-button>
          </div>
        </el-col>
        <!-- 下拉菜单 -->
        <el-select v-model="agentSelect" placeholder="请选择经纪人">
          <el-option
            v-for="item in Agentlist"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <!-- 筛选框 -->
        <el-col>
          <el-row type="flex">
            <el-input v-model="nameInput" />
            <el-button @click="submitSearch">筛选</el-button>
          </el-row>
        </el-col>

      </el-row>
    </el-card>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 110%">
      <el-table-column label="照片">
        <template v-slot="{ row }">
          <img :src="row.image" style="width: 100px" alt="">
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="phone" label="电话" />
      <el-table-column prop="agent.name" label="经纪" />
      <el-table-column prop="wechat" label="微信" />
      <el-table-column prop="desc" label="介绍" />
      <el-table-column prop="address" label="操作">
        <template v-slot="{ row }">
          <el-button
            size="mini"
            type="primary"
            @click="ditbtn(row.id)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="delbtn(row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-row type="flex" justify="center">
      <el-pagination
        :page-size="pageConfig._limit"
        :total="total"
        @current-change="currentChange"
      />
    </el-row>
    <!-- 弹窗 -->
    <clienRole
      ref="clienRole"
      :visible-dialog.sync="visibleDialog"
      @clienR="getclients"
    />
  </div>
</template>

<script>
import clienRole from './components/clien-role.vue'
import { getclients, delclients, customer, getclientNumber } from '@/api/clients'
import { getAgentsList } from '@/api/agents'
export default {
  components: { clienRole },
  data() {
    return {
      // 筛选框
      nameInput: '',
      // 下拉菜单
      Agentlist: [],
      paging: {
        // 获取条目数
        limit: 3,
        // 获取索引位置
        start: 0,
        page: 1,
        name: ''
      },

      // 分页参数
      pageConfig: {
        _limit: 2,
        _start: 0
      },
      total: 0,
      // 前端概念当中的页码
      page: 1,
      agentSelect: '',
      value: '',
      input: '',
      visibleDialog: false,
      tableData: [],
      formInline: {}
    }
  },
  created() {
    // 重新渲染
    this.getclients()
    // 客户数量
    this.getclientNumber()
    // 获取经纪列表
    this.getAgentsList()
  },
  methods: {
    // 筛选框
    submitSearch() {
      // 发请求拿数据
      // 发请求拿数据
      // 还得关注分页功能
      // 获取客户数据
      this.getclients()
      // 获取数量
      this.getclientNumber()
    },
    // 下拉菜单
    async getAgentsList() {
      const { data } = await getAgentsList(this.paging)
      this.Agentlist = data
      // console.log(data,'父组件获取经纪人')
    },
    //  分页的change事件
    currentChange(newPage) {
      this.page = newPage
      // 当前下标等于上一页最后一个，页码减一，乘以每页条数
      this.pageConfig._start = (this.page - 1) * this.pageConfig._limit
      this.getclients()
    },
    // 获取客户数量
    async getclientNumber() {
      const { data } = await getclientNumber({
        name_contains: this.nameInput || null
      })
      this.total = data
      console.log(data, '客户的数量')
    },
    // 编辑按钮数据回显
    async ditbtn(id) {
      const res = await customer(id)
      // 给子组件的表单回显数据
      this.$refs.clienRole.form = res.data
      // 弹窗显示
      this.visibleDialog = true
      //   在全局的图片上传插件渲染出来后，把获取到的图片地址加到fileList数组里
      this.$nextTick(() => {
        this.$refs.clienRole.$refs.ImgUpload.fileList.push({
          url: res.data.image
        })
        this.$refs.clienRole.$refs.ImgUpload.percentage = 100
      })
    },
    // 删除按钮
    delbtn(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async() => {
          //  console.log('确认')
          //  删除客户接口
          await delclients(id)
          if (this.tableData.length == 1 && this.page !== 1) {
            this.page--
          }
          // 重新渲染
          this.getclients()
        })
        .catch(() => {
          // console.log('取消')
        })
    },
    async getclients() {
      const res = await getclients({
        ...this.pageConfig,
        // 获取数据还要带上用户搜索条件
        name_contains: this.nameInput || null
        // ,agent:this.agentSelect
      })
      // console.log(res,'客户信息')
      this.tableData = res.data
    },
    // 新增客户
    openClien() {
      // 打开弹窗
      this.visibleDialog = true
    }
  }
}
</script>

<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
